import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ActivityIndicator,
  FlatList,
  Image,
  ScrollView,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import styles from './style';
// import SearchHeadIcon from '../../components/SearchHeadIcon';
// import ExamList from '../../components/ExamList';
import BaseUrl from '../../config/BaseUrl';
import {getTreelist, knowledgeList} from '../../service/common';
import Search from '../../components/Search';

const OnLineCouse = () => {
  const navigation = useNavigation();
  const [currentIndex, setCurrentIndex] = useState(0);
  const [couses, setCouses] = useState([]);
  const [tabs, setTabs] = useState([]);

  useEffect(() => {
    navigation.setOptions({
      title: '知识库',
      // headerRight: () => <SearchHeadIcon />,
    });

    getTreelistQuest();
  }, [navigation]);

  const getTreelistQuest = () => {
    getTreelist({type: 1001}).then((res) => {
      // console.log(res);
      setTabs(res.data);
      // 这里需要根据分类查询
      getKnowledgeList(res.data[0]?.nodeId);  
    });
  };

  const getKnowledgeList = (artType) => {
    knowledgeList({artType}).then((res) => {
      setCouses(res.rows);
    });
  }

  const sendCommentFn = (val) => {
    knowledgeList({artTitle:val}).then((res2)=>{
      console.log(res2);
      setCouses(res2.rows);
    });
  };

  return (
    <AreaView>
      <Search onSend={sendCommentFn} />
      <View style={styles.tab_content}>
        <ScrollView
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          style={styles.tab_container}>
          {(tabs || []).map((tab, i) => (
            <TouchableOpacity
              style={styles.tab_list}
              activeOpacity={1}
              key={i}
              onPress={() => {
                setCurrentIndex(i);
                getKnowledgeList(tab.nodeId)
              }}>
              <Text
                style={[
                  styles.tab_text,
                  // eslint-disable-next-line react-native/no-inline-styles
                  {
                    color: currentIndex === i ? '#EB0029' : '#333333',
                    fontWeight: currentIndex === i ? '600' : '400',
                  },
                ]}>
                {tab.nodeName}
              </Text>
              {currentIndex === i && <View style={styles.line} />}
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>
      <ScrollView style={styles.list_box}>
        {(couses || []).map((item) => (
          // <ExamList key={item.epId} item={item} onPress={() => onPressList(item)} />
          <TouchableOpacity
            activeOpacity={1}
            key={item.artId}
            onPress={() => {
              navigation.push('KnowledgeDetail', {
                artId: item.artId,
              });
            }}
            style={styles.list_container}>
            <Image
              style={styles.list_img}
              source={{uri: BaseUrl.imgurl + item?.coveImage}}
            />
            <View style={styles.content_container}>
              <View>
                <View style={styles.name_container}>
                  <Text style={styles.name_text}>{item?.artTitle}</Text>
                </View>
                <Text style={styles.desc} numberOfLines={4}>
                  {item?.artDesc}
                </Text>
              </View>
              <Text style={styles.pk}>已有{item?.readNum}人做过</Text>
            </View>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </AreaView>
  );
};

export default OnLineCouse;
